<template>
	<!-- <template>标签下只能有一个view节点 -->
	<!-- 100vh=整个屏幕高度  100vw等于整个屏幕宽度 比百分比好用 -->
	<view class="y" style="background-color: #eee;height: 100vh;">
		<view style="background-color: #ffaa00;height: 300px;" class="y">
			<view class="x" style="margin-top: 55px;">
				<image style="height: 20px;width: 20px;margin-left: 20px;" src="../../static/logo.png"></image>
				<image style="height: 20px;width: 20px;margin-left: 16px;" src="../../static/logo.png"></image>
				<view style="color: white;margin: auto;">我的</view>
			</view>
			<view class="x" style="margin: 70px 20px 0px 20px;align-items: flex-end;">
				<navigator style="flex: 1;" url="/pages/login/login">Hi,测试</navigator>
				<image style="height: 50px;width: 50px;border-radius: 25px" src="../../static/logo.png"  @click="clickImage"></image>
			</view>
		</view>
		<view style="background-color: white;margin: -40px 20px 0px 20px;border-radius: 10px;padding: 15px;" class="x">
			<view class="y" style="flex: 1;justify-content: center;align-items: center;" @click="clickImage()">
				<view>0</view>
				<view style="margin-top: 10px;">余额</view>
			</view>
			<navigator class="y" style="flex: 1;justify-content: center;align-items: center;" url="/pages/login/login">
				<view>0</view>
				<view style="margin-top: 10px;">余额</view>
			</navigator>
		</view>
		<view style="background-color: white;margin: 10px 20px 0px 20px;border-radius: 10px;padding: 15px;" class="x">
			<view class="y" style="flex: 1;justify-content: center;align-items: center;">
				<image style="height: 20px;width: 20px;" src="../../static/logo.png"></image>
				<view style="margin-top: 10px;">余额</view>
			</view>
			<view class="y" style="flex: 1;justify-content: center;align-items: center;">
				<image style="height: 20px;width: 20px;" src="../../static/logo.png"></image>
				<view style="margin-top: 10px;">余额</view>
			</view>
			<view class="y" style="flex: 1;justify-content: center;align-items: center;">
				<image style="height: 20px;width: 20px;" src="../../static/logo.png"></image>
				<view style="margin-top: 10px;">余额</view>
			</view>
			<view class="y" style="flex: 1;justify-content: center;align-items: center;">
				<image style="height: 20px;width: 20px;" src="../../static/logo.png"></image>
				<view style="margin-top: 10px;">余额</view>
			</view>
		</view>
		<!-- 750rpx-40rpx-40rpx = 图片的宽度 670rpx -->
		<image src="https://s1.ax1x.com/2020/04/07/G2usUI.png" style="margin: 20rpx 40rpx;width: 670rpx;" mode="widthFix"></image>
		<view style="background-color: white;margin: 10px 20px 0px 20px;border-radius: 10px;padding: 15px;" class="y">
			<view class="x" style="padding: 15px 5px;align-items: center;border-bottom: 1rpx solid #eee;">
					<image style="height: 20px;width: 20px;margin-right: 10px;" src="../../static/logo.png"></image>
					<view style="flex: 1;">地址管理</view>
					<image style="height: 11px;width: 16px;" src="../../static/下载.png"></image>
			</view>
			<view class="x" style="padding: 15px 5px;align-items: center;border-bottom: 1rpx solid #eee;">
					<image style="height: 20px;width: 20px;margin-right: 10px;" src="../../static/logo.png"></image>
					<view style="flex: 1;">地址管理</view>
					<image style="height: 11px;width: 16px;" src="../../static/下载.png"></image>
			</view>
			<view class="x" style="padding: 15px 5px;align-items: center;">
					<image style="height: 20px;width: 20px;margin-right: 10px;" src="../../static/logo.png"></image>
					<view style="flex: 1;">地址管理</view>
					<image style="height: 11px;width: 16px;" src="../../static/下载.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			//第一种跳转方法
			clickImage(){
				console.log("图片被点击了")
				uni.navigateTo({
					url:"/pages/uni-do/uni-do"
				})
			}
		}
	}
</script>

<style>

</style>